<template>
  <el-card >
      <template #header>
        <div class="card-header type-title">
          <span>微信绑定、登录验证方式选择</span>
        </div>
      </template>

      <el-row>
        <el-col>
            <div class="ant-alert alert-info">
              <span class="ant-alert-message">
                1:扫码绑定微信号，绑定微信号后可修改登录验方式。2:验证码登录，根据手机号发送验证码，填写验证码验证登录。3:扫码验证登录，微信扫描二维码，验证成功登录。
              </span>
            </div>
        </el-col>
        <el-col style="margin-top: 10px;">
          <div class="wxImg">
            <img :src="qrsrc">
          </div>
        </el-col>
      </el-row>


    <el-row style="margin-top: 15px;">
        <el-col>
            <div class="ant-alert alert-info">
              <span class="ant-alert-message">
                 2:登录验证方式选择:
              </span>
            </div>
        </el-col>



        <el-col  :span="10" style="border: 1px solid rgb(232, 232, 232); margin-top: 10px; padding: 20px 0px;">
             <!--<el-form ref="loginTypeRef" :model="user" :rules="rules" label-width="150px" label-suffix=":">
                <el-form-item label="登录验证方式">
                  <el-input v-model="user.oldPassword" placeholder="请输入支付密码" type="password" :show-password="true" />
                 <el-radio-group v-model="loginType.jt">
                        <el-radio value="1">短信验证码</el-radio>
                        <el-radio value="2">微信扫码验证</el-radio>
                   </el-radio-group>

                </el-form-item>
            </el-form>-->

            <el-form ref="pwdRef" :model="user" :rules="rules" label-width="150px" label-suffix=":">
              <el-form-item label="登录验证方式" prop="jt">
                 <el-radio-group v-model="user.jt">
                        <el-radio label="1">短信验证码</el-radio>
                        <el-radio label="2">微信扫码验证</el-radio>
                 </el-radio-group>
               </el-form-item>
            </el-form>
            <div style="text-align: center;">
                <el-button type="primary" @click="submit" :loading="loading"  v-hasPermi="['system:user:updLoginWay']">确定</el-button>
            </div>
        </el-col>
    </el-row>

  </el-card>

</template>

<script setup lang="ts">
import { updLoginWay,selLoginWay,getBindQr } from "@/api/system/user";
import { getDomain } from "@/utils/getDomain"
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const pwdRef = ref<ElFormInstance>();
const loading = ref(false);

const user = ref({
  jt:"1"
});
const qrsrc = ref('');
const rules = ref({
  jt: [{ required: true, message: "请选择登录验证方式", trigger: "blur" }]
});


onMounted( async () => {
   let result =  await selLoginWay();
   user.value.jt = result.data+"";
   let domain = getDomain();
   let qrResult =  await getBindQr(domain);
   qrsrc.value = qrResult.msg;

})

const submit = ()=>{

    pwdRef.value?.validate(async (valid: boolean) => {

      if (valid) {
        try {
          loading.value = true;
          await updLoginWay(user.value.jt);
          loading.value  = false;
          proxy?.$modal.msgSuccess("修改成功");
        }catch(e){
           loading.value  = false;
        }

      }
    });


}



</script>

<style>

  .type-title {
      font-size: 14px;
      font-weight: 700;
  }

.ant-alert-message {
    color: rgba(0,0,0,.85);
}

  .ant-alert {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      color: rgba(0,0,0,.65);
      font-size: 13px;
      font-variant: tabular-nums;
      line-height: 1.5;
      list-style: none;
      font-feature-settings: "tnum";
      position: relative;
      padding: 8px 15px 8px 10px;
      word-wrap: break-word;
      border-radius: 4px;
  }

  .alert-info {
      background-color: #e6f7ff;
      border: 1px solid #91d5ff;
  }


  .wxImg {
     /* padding: 8px;
      border: 1px solid #e5e5e5;*/
      display: inline-block;
  }

</style>
